﻿@using Kendo.Mvc.UI

@{
    ViewBag.Title = "Create";
}

@model Cnm.Models.ViewModels.PostModel
@{
    var completed = ViewBag.Completed ?? false;
}

<div class="container">
    <ul class="submit-steps">
        <li><h3>Đăng tin miễn phí</h3></li>
        @if (completed == false)
        {
            <li class="current-step step-one"><span>Tạo tin</span></li>
            @*<li class=" step-two"><span>Kiểm tra lại</span></li>*@
            <li class=" step-two"><span>Hoàn tất!</span></li>
        }
        else
        {
            <li class="step-one"><span>Tạo tin</span></li>
            @*<li class=" step-two"><span>Kiểm tra lại</span></li>*@
            <li class="current-step step-two"><span>Hoàn tất!</span></li>
        }
    </ul>
    @if (completed == false)
    {
        <div class="panel panel-default">
            @using (Html.BeginForm("Create", "Post", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                <div class="panel-heading">
                    <h3 class="panel-title">Nội dung tin <small>(Vui lòng điền đầy đủ tất cả các mục)</small></h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        @Html.LabelFor(p => p.CategoryId, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @(Html.Kendo()
                              .DropDownListFor(p => p.CategoryParentId)
                              .HtmlAttributes(new { @class = "w-40-pull" })
                              .OptionLabel("- Chọn danh mục -")
                              .DataTextField("Text")
                              .DataValueField("Key")
                              .DataSource(p => p.Read(r => r.Action("GetFirstLevelCategories", "Ref"))))
                            @(Html.Kendo()
                              .DropDownListFor(p => p.CategoryId)
                              .HtmlAttributes(new { @class = "w-40-pull" })
                              .OptionLabel("- Chọn danh mục -")
                              .DataTextField("Text")
                              .DataValueField("Key")
                              .CascadeFrom("CategoryParentId")
                              .DataSource(p =>
                              {
                                  p.Read(r => r.Action("GetSecondLevelCategories", "Ref").Data("onFirstLevelSelect")).ServerFiltering(true);
                              })
                              .Enable(false)
                              .AutoBind(false))
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.CategoryParentId)
                            @Html.ValidationMessageFor(p => p.CategoryId)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(p => p.RegionId, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @(Html.Kendo()
                              .DropDownListFor(p => p.RegionId)
                              .HtmlAttributes(new { @class = "w-40-pull" })
                              .OptionLabel("- Chọn -")
                              .DataTextField("Text")
                              .DataValueField("Key")
                              .DataSource(p => p.Read(r => r.Action("GetRegions", "Ref"))))
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.RegionId)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(p => p.TitularId, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @(Html.Kendo()
                              .DropDownListFor(p => p.TitularId)
                              .HtmlAttributes(new { @class = "w-40-pull" })
                              .DataTextField("Text")
                              .DataValueField("Key")
                              .DataSource(p => p.Read(r => r.Action("GetTitulars", "Ref"))))
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.TitularId)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(p => p.PostTypeId, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @(Html.Kendo()
                              .DropDownListFor(p => p.PostTypeId)
                              .HtmlAttributes(new { @class = "w-40-pull" })
                              .DataTextField("Text")
                              .DataValueField("Key")
                              .CascadeFrom("CategoryId")
                              .DataSource(p => p.Read(r => r.Action("GetPostTypes", "Ref").Data("onCategoryIdSelect")).ServerFiltering(true)))
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.PostTypeId)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(p => p.Name, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @Html.TextBoxFor(p => p.Name, new { @class = "form-control w-100-pull" })
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.Name)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(p => p.FullDescription, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @Html.TextAreaFor(p => p.FullDescription, new { @class = "form-control w-100 ckeditor" })
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.FullDescription)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(p => p.Price, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @(Html.Kendo().NumericTextBoxFor(p => p.Price).Decimals(0).Format("{0:n0}"))
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.Price)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.Label("Hình", new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            <script id="fileTemplate" type="text/x-kendo-template">
                                <span class="k-progress"></span>
                                <img class="k-icon upload-image-thumb" for-image="image-#=name#" />
                                <span class="k-filename" title="#=name#">#=name#</span>
                                <strong class="k-upload-status">
                                    <span class="k-upload-pct"></span>
                                    <button type="button" class="k-upload-action"></button>
                                </strong>
                            </script>

                            @(Html.Kendo().Upload()
                              .Name("files")
                              .TemplateId("fileTemplate")
                              .HtmlAttributes(new { accept = ".png,.jpg,.gif,.jpeg" })
                              .Async(a => a
                                  .Save("Save", "Post")
                                  .Remove("Remove", "Post")
                                  .AutoUpload(true)
                              )
                              .Events(p => p.Select("onImageSelect").Success("onSuccess").Complete("onComplete"))
                                  )
                            <input name="fileNames" id="fileNames" type="hidden"/>
                        </div>
                        <div class="col-sm-3">
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(p => p.PaymentMethodId, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @(Html.Kendo()
                              .DropDownListFor(p => p.PaymentMethodId)
                    //.OptionLabel("- Chọn -")
                              .HtmlAttributes(new { @class = "w-40-pull" })
                              .DataTextField("Text")
                              .DataValueField("Key")
                              .DataSource(p => p.Read(r => r.Action("GetPaymentMethods", "Ref")
                                  )))
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.PaymentMethodId)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(p => p.ShippingProcess, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @Html.TextAreaFor(p => p.ShippingProcess, new { @class = "form-control w-100-pull" })
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.ShippingProcess)
                        </div>
                    </div>
                </div>

                <div class="panel-heading">
                    <h3 class="panel-title">Thông tin liên hệ <small>(Vui lòng điền đầy đủ tất cả các mục)</small></h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        @Html.LabelFor(p => p.PosterName, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @Html.TextBoxFor(p => p.PosterName, new { @class = "form-control w-40" })
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.PosterName)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(p => p.PosterEmail, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @Html.TextBoxFor(p => p.PosterEmail, new { @class = "form-control w-40" })
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.PosterEmail)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(p => p.PosterPhone, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @Html.TextBoxFor(p => p.PosterPhone, new { @class = "form-control w-40" })
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.PosterPhone)
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(p => p.PosterAddress, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-7">
                            @Html.TextBoxFor(p => p.PosterAddress, new { @class = "form-control w-40" })
                        </div>
                        <div class="col-sm-3">
                            @Html.ValidationMessageFor(p => p.PosterAddress)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-7">
                            <button type="submit" class="btn btn-warning">
                                Tiếp tục <i class="fa fa-angle-double-right"></i>
                            </button>
                        </div>
                    </div>
                </div>

                
            }

        </div>

        <script>
            function onFirstLevelSelect() {
                return { parentId: $('#CategoryParentId').val() }
            }

            function onCategoryIdSelect() {
                return { categoryId: $('#CategoryId').val() }
            }

            $(function () {
                $("form").kendoValidator();
            });

            function addExtensionClass(extension) {

            }

            function onImageSelect(e) {
                var files = e.files;
                if (files.length > 6) {
                    alert("Bạn được đăng tối đa 6 hình ảnh cho 1 tin");
                }

                //for (var fileCntr = 0; fileCntr < files.length; fileCntr++) {
                //    if (files[fileCntr].size > 1024000) {
                //        alert("Bạn không được đăng hình có dung lượng lớn hơn 4 Mb");
                //        e.preventDefault();
                //        return false;
                //    }

                //    if (files[fileCntr].extension.toLowerCase() == '.exe') {
                //        alert("Bạn không được đăng file .exe");
                //        e.preventDefault();
                //        return false;
                //    }
                //}
            }

            function onSuccess(e) {
                var responseTxt = jQuery.parseJSON(e.XMLHttpRequest.responseText);

                if (responseTxt.Status == true) {
                    $('img[for-image="image-' + responseTxt.PictureName + '"').attr('src', responseTxt.PictureUrl);
                    //var fileNames = $('#files').val();
                    //$('#files').val(fileNames.push(responseTxt.PictureNewName));
                    $('span[class="k-filename"][title="' + responseTxt.PictureName + '"]').text(responseTxt.PictureNewName);
                }
            }

            function onComplete(e) {
                var files = $('.k-upload-files .k-filename');
                if (files.length > 6) {
                    for (var i = 6; i < files.length; i++) {
                        $('img[for-image="image-' + $(files[i]).text() + '"]').parent().find('button').trigger('click');
                    }
                }

                files = $('.k-upload-files .k-filename');
                var fileNames = [];
                for (var j = 0; j < files.length; j++) {
                    fileNames.push($(files[j]).text());
                }
                //var file = $('#files').data('kendoUpload');
                //file.files = fileNames;
                $('#fileNames').val(fileNames);
            }
        </script>
    }
    else
    {
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">CẢM ƠN BẠN ĐÃ ĐĂNG TIN!</h3>
            </div>
            <div class="panel-body">
                Tin rao vặt của bạn đã được đăng thành công! Bạn có thể xem tin rao vặt của bạn <a href="@Url.RouteUrl("Post", new { SeName = ViewBag.SeName })">ở đây</a>
            </div>
        </div>
    }
</div>